<template>
  <div class="det_tab" >
   
    <eagle-page-list
      :isShowSearch="false"
      ref="eaglePageList"
      @bindData="bindData"
      :queryParams="queryParams"
      :controller="controller"
      :isPage="false"
     
    >
    <div slot="list">
    <eagle-cell class="card" v-for="(item, index) in list" :key="index">
      
      <eagle-tag v-if="item.Status == 0" class="info_tag" type="normal"
        >已退回
      </eagle-tag>
      <eagle-tag v-if="item.Status == 5" class="info_tag" type="danger"
        >审核中
      </eagle-tag>
      <eagle-tag v-if="item.Status == 10" class="info_tag" type="success"
        >通过
      </eagle-tag>
      <div class="warn_item"  @click="goDetail(item.ID)">
        <div>
          <div class="warn_header">
            <div>{{ index + 1 }}、用火申请</div>
          </div>
          <eagle-row class="dep_sort">
            <eagle-col span="8">
              <img
                src="@/assets/Images/AppIcon/icon_list_kind.png"
                alt=""
              />用火面积:{{ item.FireArea }}</eagle-col
            >
            <eagle-col span="16">
              <img src="@/assets/Images/AppIcon/icon_list_type.png" alt="" />{{
                item.CompanyName +" "+ (item.VillageGroup +"小组"|| "") +" "+ (item.Mountain || "")
              }}</eagle-col
            >
          </eagle-row>

          <eagle-row class="dep_sort">
            <eagle-col span="8">
              <img src="@/assets/Images/AppIcon/icon_list_user.png" alt="" />{{
                item.Applicant
              }}</eagle-col
            >
            <eagle-col span="16">
              <img src="@/assets/Images/AppIcon/icon_list_date.png" alt="" />{{
                getDateTime(item.UseTime)
              }}</eagle-col
            >
          </eagle-row>
          <eagle-row class="dep_sort">
            <eagle-col span="8">
              <img
                src="@/assets/Images/AppIcon/icon_list_industry.png"
                alt=""
              />作业前照片
            </eagle-col>
            <eagle-col span="8">
              <div @click.stop>
                <el-image
                  :style="item.firstimg ? 'width: 80px; height: 80px' : ''"
                  :src="item.firstimg"
                  :preview-src-list="item.imglist"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                    <span>无照片</span>
                  </div>
                </el-image>
              </div>
            </eagle-col>
          </eagle-row>

        </div>
      </div>
      <eagle-divider />
      <div v-if="item.Status==0" class="dep_sort">
              <div
                class="fr"
                @click="edit(item)"
              >
                编辑
              </div>
            </div>
    </eagle-cell>
  </div>
</eagle-page-list>

  </div>

</template>
<script>
import { getDateTime } from "@/utils/getDate";
export default {
  created() {
    // this.$axios
    //   .get(
    //     "/Public/GetAgricultureUseFireList?mobile=" + this.$route.query.mobile
    //   )
    //   .then((e) => {
    //     if(!e.data.length){
    //       this.hasdata=false
    //     }
    //     this.list = e.data;
    //     this.list.forEach((element) => {
    //       if (element.PhotosBeforeHomework) {
    //         element.imglist = this.getImageList(element.PhotosBeforeHomework);
    //         element.firstimg = element.imglist[0];
    //       }
    //       if (element.PhotosAfterHomework) {
    //         element.imglist2 = this.getImageList(element.PhotosAfterHomework);
    //         element.firstimg2 = element.imglist2[0];
    //       }
    //     });
    //     console.log(this.list);
    //   });
   

  },
  data() {
    return {
      controller:"/Public/GetAgricultureUseFireList",
      mobile:this.$route.query.mobile,
      queryParams:{
        mobile:this.$route.query.mobile
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      list: [],
      hasdata:true,
      isLoading:false,
    };
  },
  methods: {
    bindData(data) {
      this.list = [];
      if (data) {
        this.list = data;
      }
    },
    getDateTime(value) {
      return getDateTime(value);
    },
    // getFirstImage(str) {
    //   return str.split(";").get(0);
    // },
    getImageList(str) {
      return str.split(";").map((e) => this.baseUrl + e);
    },
    goDetail(ID) {
      this.$router.push({
        path: "/CPNS/AuditHistory",
        query: { ID: ID },
      });
    },
    edit(item){
      this.$router.push({ path: "/CPNS/info", query: { item:item } });
    }
  },
};
</script>

<style lang="less" scoped>
.det_tab {
  background-color: #e8f1f8;
  text-align: center;
  min-height: 100vh;
  
}

.operate_row,
.none_row {
  padding: 10px;
  font-size: 13px;
  background-color: #fff;
  border-bottom: 1px solid #e8f1f8;
  /*margin-bottom: 10px;*/
}
.van-divider {
  margin-top: 3px;
  margin-bottom: 3px;
}

.my-taskhistory {
  min-height: 100vh;
  background-color: #e8f1f8;
}

.info_search {
  padding: 10px;
  border-radius: 5px !important;
  .van-field__control {
    background-color: #ffffff !important;
  }
}

.all_dep {
  background-color: #ffffff;
}

.warn_item {
  border-radius: 5px;
  position: relative;
}
.warn_header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
  .warn_tag {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 26.64rem 0 0 26.64rem;
  }
}
.dep_sort {
  // display: flex;
  // flex-wrap: wrap;
  // margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.dep_btm {
  display: flex;
  justify-content: flex-end;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}

.choose_btm {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  .choose_cancel {
    padding: 0 10px;
    display: flex;
    align-items: center;
    float: left;
  }
  .choose_confirm {
    float: right;
    border-radius: 0;
  }
}

.card_check {
  .info_tag {
    right: -35px;
  }
}
.aaa{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;

}
</style>